<template>
  <div>
    <van-tabs
      v-model="activeName"
      @change="onTabsClick($event)"
    >
      <van-tab
        v-for="item in brotherCategory"
        :key="item.id"
        :title="item.name"
        :name="item.id.toString()"
      >
        <h4>{{item.name}}</h4>
        <p>{{item.front_desc}}</p>
      </van-tab>
    </van-tabs>
    <ProductResult :goodsList="cateGoodsList" />
  </div>
</template>

<script>
import { GetChannelData, GetChannelGoodsList } from "@/request/api";
import ProductResult from "@/components/SearchPopup/SearchProduct/ProductResult/ProductResult.vue";
export default {
  data() {
    return {
      //当前活跃的tab名称
      activeName: "",
      //所有分类
      brotherCategory: [],
      //当前分类数据
      // currentCategory:[]
      //请求类别商品的参数
      cateGoodsParams: {
        categoryId: 0,
        page: 1,
        size: 10,
      },
      //单一分类商品列表
      cateGoodsList: [],
    };
  },
  async created() {
    //根据分类id请求分类类别数据
    let cateId = this.$route.query.cateId;
    //将对应name属性的选项卡激活。那刷新后都是激活参数里id对应的选项卡。。。
    this.activeName = cateId;
    let res = await GetChannelData({ params: { id: cateId } }).catch(
      (err) => err
    );
    // console.log("分类数据", res.data);
    if (res.errno !== 0) return this.$toast.fail("请求分类数据失败！");
    this.brotherCategory = res.data.brotherCategory;
    //根据分类id请求分类下的商品数据
    this.getCateGoodsList(cateId);
  },
  components: { ProductResult },

  computed: {},

  methods: {
    //获取分类页面商品列表
    async getCateGoodsList(cateId) {
      //根据分类id请求分类下的商品数据
      this.cateGoodsParams.categoryId = cateId;
      let res = await GetChannelGoodsList({
        params: this.cateGoodsParams,
      }).catch((err) => err);
      // console.log("单一分类商品列表", res.data);
      if (res.errno !== 0) return this.$toast.fail("请求该分类数据失败！");
      this.cateGoodsList = res.data.goodsList;
    },
    //tab改变事件，传入点击项的cateId请求数据并重新渲染
    //为什么vant上面示例不用传入$event就可以拿到回调参数。而且还是两个。
    //我这里还必须传入$event实参，能拿到的是选项卡的name属性。
    onTabsClick(cateId) {
      //根据分类id请求分类下的商品数据
      // this.getCateGoodsList(cateId);
      //我给name属性绑定item.id是数值也没报错。但还是toString()保险一点
      // console.log("activeName:", this.activeName);
      // this.activeName = cateId;
      //因为路由参数没变,刷新后created请求的数据还是回到之前的.
      this.$route.query.cateId = cateId;
      // console.log(cateId);
      this.$router.replace({
        path: "/empty",
        query: { cateId: cateId, from: "channel" },
      });
      //调用app.vue提供的reload方法控制<router-view>渲染,实现刷新功能.
      //但是...我们是这里加了参数之后点击根本不跳转,不加参数又可以.为什么,为什么,为什么???
      // this.$router.push({
      //   path: "/channel",
      //   query: { cateId: cateId },
      // });
      //更新页面数据
      // this.getCateGoodsList(cateId);
      // console.log(cateId);
      // this.reload();
    },
  },
  // watch: {
  //   $route(newVal, oldVal) {
  //     // console.log(newVal, oldVal);
  //     if (newVal.fullPath !== oldVal.fullPath) {
  //       this.$router.replace(`/empty?cateId=${newVal.query.cateId}`);
  //     }
  //   },
  // },
  inject: ["reload"],
};
</script>

<style lang='less' scoped>
.van-tabs {
  text-align: center;
  h4 {
    line-height: 0.4rem;
    font-size: 0.16rem;
  }
  p {
    line-height: 0.2rem;
  }
}
</style>